<section id="matter_detali" class="ml-24 mr-24">
    <div class="clearfix ptb-10 border-b">
        <h4 class="pull-left line-height-34">{{showMatter == 'video'?'视频':'图片'}}管理</h4>
    </div>
    <!-- //主体列表 -->
    <div class="house-sharing-list clearfix">
        <div class="matter_video contents" v-if="showMatter == 'video'">
            <button class="s-btn-default btn font-14 upload-file"  @click="fileUp" v-if="isShowBut">上传视频</button>
            <div class="videoBox" v-if="isShowContent">
                <span class="delIcon" @click="delVideo">×</span>
                <video id="video" :src="block_elements.video.url"  loop controls playsinline="true"
                    webkit-playsinline="true"  width="100%">
                    您的浏览器不支持 video 标签
                </video>
            </div>
            <div style="display: flex;align-items: center;margin-bottom: 50px" v-if="isShowContent">
                <p class="color-cfcfcf" style="margin-right:13px;">自动播放：</p>
                <div class="select-ul house-sharing-text" style="width:110px;margin-right: 20px;">
                    <span class="select-name br-4" ref="modules">{{isAutoPlay == 'true'?'是':'否'}}</span>
                    <ul>
                        <li v-for="item in autoPlay" @click="eventModule(item.key)">{{item.name}}</li>
                    </ul>
                </div>
                <div class="auth-config-pop">
                    <span class="auth-item" :class="{'js-q-active':isMute}" @click="eventMute">默认静音</span>
                </div>
            </div>
        </div>
        <div class="matter_img contents" v-if="showMatter == 'img'">
            <button class="s-btn-default btn font-14 upload-file" @click="picUp" v-if="quanxian.indexOf('c223') > -1">上传图片</button>
            <div class="list br-4 global_table" style="border:1px solid #E5E5E5;margin: 15px 0 50px 0">
                <ul class="dy-flex l-h-40 text-center global_table_title">
                    <li class="dy-fx-2">图片</li>
                    <li class="dy-fx-3">链接</li>
                    <li class="dy-fx-2">排序</li>
                    <li class="dy-fx-2 border-l">操作</li>
                </ul>
                <div>
                    <ul class="dy-flex l-h-40 text-center border-t global_table_item" v-for="(item, index) in block_elements.banner">
                        <li class="dy-fx-2"><img width="120" height="80" :src="item.url" alt=""></li>
                        <li class="dy-fx-3 editurl">
                            <span v-if="!item.isEdit" :title="item.url">{{item.refUrl}}</span>
                            <input type="text" v-model="item.EditUrl" v-if="item.isEdit">
                            <span class="icon-Gm-edit" v-if="!item.isEdit" @click="editUrl(item)" v-show="quanxian.indexOf('c225') > -1"></span>
                            <span class="icon-Gm-confirm" v-if="item.isEdit" @click="saveEdit(item)"></span>
                            <span class="icon-Gm-delete-2" v-if="item.isEdit" @click="item.isEdit = false"></span>
                        </li>
                        <li class="dy-fx-2">{{item.seq}}</li>
                        <li class="dy-fx-2 border-l operation">
                            <span class="icon-ascending" v-if="index != 0" @click="rank(index,'up')" v-show="quanxian.indexOf('c226') > -1"></span>
                            <span class="icon-descending" v-if="index != block_elements.banner.length-1" @click="rank(index,'down')" v-show="quanxian.indexOf('c226') > -1"></span>
                            <span class="icon-Gm-delete" @click="rank(index,'del')" v-if="quanxian.indexOf('c224') > -1"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="picButton"></div>
        <div class="fileButton"></div>
        <div class="loadprogress" v-show="progress">正在上传({{progress}})...</div>
    </div>
</section>

<script src="modules/workbench/scripts/matterRegulate_detail.js" charset="utf-8"></script>

<style media="screen">
    .loadprogress{
		position: fixed;
        z-index: 999999;
		left: 0;
		bottom: 0;
		height: 20px;
		width: 500px;
		font-size: 12px;
		text-indent: 3px;
		line-height: 20px;
	}
    .contents {
        padding-top: 20px;
    }

    .videoBox {
        width: 300px;
        margin-bottom: 20px;
        position: relative;
    }
    .videoBox span{
        position: absolute;
    }
    .editurl {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .editurl span:nth-child(1) {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .editurl>span,
    .editurl>input {
        margin: 0 5px
    }

    .editurl>input {
        width: 200px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
        border-radius: 4px;
        border: 1px solid rgba(229, 229, 229, 1);
        text-align: center;
        margin-left: 50px;
    }

    .global_table_item li {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .operation span {
        margin: 0 10px;
        cursor: pointer;
    }

    .delIcon {
        position: relative;
        top: -10px;
        right:-10px;
        width: 20px;
        height: 20px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
    }
</style>
